<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue列表添加动画</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/element-ui/2.14.1/theme-chalk/index.min.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
			display: none;
		}
		.test-modal {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.test-modal .el-dialog {
			display: flex;
			flex-direction: column;
			margin-top: 0 !important;
			margin-bottom: 0 !important;
			max-height: calc(100% - 30px);
			max-width: calc(100% - 30px);
		}
		.test-modal .el-dialog .el-dialog__body {
			padding: 10px 20px;
			flex: 1;
			overflow: auto;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<el-button @click="showDialog">显示弹窗</el-button>

		<el-dialog
			class="test-modal"
			title="提示"
			:visible.sync="dialogVisible"
			width="30%">
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.6.8/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.14.1/index.min.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					dialogVisible: false
				}
			},
			mounted () {
				
			},
			methods: {
				showDialog() {
					this.dialogVisible = true;
				}
			}
		})
	</script>
</body>	
</html>